<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

	<%--全选与全不选--%>
	<script type="text/javascript" src="jquery/myself/quanxuan.js"></script>
	<%--分页插件--%>
	<link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
	<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
<script type="text/javascript">
	$(function(){

		//当容器加载完成，对容器调用工具函数
		$(".mydate").datetimepicker({
			language:'zh-CN',//语言
			format:'yyyy-mm-dd',//日期格式
			minView:'month',//日期选择器上最小能选择的日期的视图
			initialDate:new Date(),// 日历的初始化显示日期，此处默认初始化当前系统时间
			autoclose:true,//选择日期之后，是否自动关闭日历
			todayBtn:true,//是否显示当前日期的按钮
			clearBtn:true//是否显示清空按钮
		});

	});


	$(function () {
		selectActivities(1,10);
		selectActivitiesByChaXun();
		openaddActivity();
		saveCreateActivityBtn();
		editActivityModal();
		deleteActivityBtn();
		exportActivityAllBtn();
		importActivityListBtn();
	});

	function editActivityModal() {
		$("#editActivityBtn").on("click",function () {
			var checkedList = $("#tBody input:checked");
			if(checkedList.size() != 1)
			{
				alert("请选中一条数据进行编辑！");
				return;
			}
			var id = checkedList.val();
			$.ajax({
				url:"workbench/activity/editActivityModal.do",
				type:"get",
				data:{
					id:id
				},
				success:function (data) {
					var optionData = "";
					$.each(data.users,function (index,user) {
						optionData+="<option value=\""+user.id+"\">"+user.name+"</option>";
					});
					$("#edit-marketActivityOwner").html(optionData);
					$("#edit-marketActivityOwner").val(data.activity.owner);
					$("#edit-marketActivityName").val(data.activity.name);
					$("#edit-startDate").val(data.activity.startDate);
					$("#edit-endDate").val(data.activity.endDate);
					$("#edit-cost").val(data.activity.cost);
					$("#edit-description").val(data.activity.description);
					$("#edit-id").val(data.activity.id);
				}
			});
			$("#editActivityModal").modal("show");
		});

		/*-----------------------------------------*/
		$("#saveEditActivityBtn").on("click",function () {
			var name = $.trim($("#edit-marketActivityName").val());
			if(name =='')
			{
				alert("活动名称不能为空！");
				return;
			}
			var cost = $.trim($("#edit-cost").val());
			if(!/^(([1-9]\d*)|0)$/.test(cost))
			{
				alert("成本格式不对！");
				return;
			}
			var id = $.trim($("#edit-id").val());
			var owner = $.trim($("#edit-marketActivityOwner").val());
			var name = $.trim($("#edit-marketActivityName").val());
			var startDate = $.trim($("#edit-startDate").val());
			var endDate = $.trim($("#edit-endDate").val());
			var description = $.trim($("#edit-description").val());
			$.ajax({
				url:"workbench/activity/updateActivityModal.do",
				type:"post",
				data:{
					id:id,
					name:name,
					owner:owner,
					startDate:startDate,
					endDate:endDate,
					description:description,
					cost:cost
				},
				success:function (data) {
					if(data.code == 1)
					{
						alert("更新成功！");
						$("#editActivityModal").modal("hide");
						//selectActivities($("#demo_pag1").bs_pagination("currentPage",currentPage),$("#demo_pag1").bs_pagination("rowsPerPage",rowsPerPage));
						selectActivities(1.,10);
					}else {
						alert(data.message);
					}

				}
			});

		});
	}
	function saveCreateActivityBtn() {
		$("#saveCreateActivityBtn").on("click",function () {
			var owner = $.trim($("#create-marketActivityOwner").val());
			if(owner == '')
			{
				alert("所属者不能为空！");
				return;
			}
			var name = $.trim($("#create-marketActivityName").val());
			if(name =='')
			{
				alert("活动名称不能为空！");
				return;
			}
			var cost = $.trim($("#create-cost").val());
			if(!/^(([1-9]\d*)|0)$/.test(cost))
			{
				alert("成本格式不对！");
				return;
			}
			var startDate = $.trim($("#create-startDate").val());
			var endDate = $.trim($("#create-endDate").val());
			var description = $.trim($("#create-description").val());
			$.ajax({
				url:"workbench/activity/addActivities.do",
				type:"post",
				data:{
					owner:owner,
					name:name,
					cost:cost,
					startDate:startDate,
					endDate:endDate,
					description:description
				},
				success:function (data) {
					if(data.code ==1)
					{
						alert("添加成功！");
						$("#createActivityModal").modal("hide");
						selectActivities(1,$("#demo_pag1").bs_pagination("as",rowsPerPage));
					}else {
						alert(data.message);
					}

				}
			});

		});

	}
	function openaddActivity() {
		$("#createActivityBtn").on("click",function () {
			$("#activityForm")[0].reset();
			$.ajax({
				url:"workbench/activity/openaddActivity.do",
				type:"get",
				success:function (data) {
					var dataStr ="";
					$.each(data,function (index,obj) {
						dataStr+="<option value=\""+obj.id+"\">"+obj.name+"</option>";
					});
					$("#create-marketActivityOwner").html(dataStr);
				}
			});
			$("#createActivityModal").modal("show");
		})
	}

	function selectActivities(pageNum,pageSize) {
		//$("#queryActivityBtn").on("click",function () {
			var name = $.trim($("#query-name").val());
			var owner = $.trim($("#query-owner").val());
			var startDate = $.trim($("#query-startDate").val());
			var endDate = $.trim($("#query-endDate").val());
			$.ajax({
				url:"workbench/activity/queryActivities.do",
				type:"get",
				data:{
					name:name,
					owner:owner,
					startDate:startDate,
					endDate:endDate,
					pageNum:pageNum,
					pageSize:pageSize
				},
				success:function (data) {
					var dataStr ="";
					$.each(data.activityList,function (index,obj) {
						dataStr+="<tr class=\"active\">";
						dataStr+="<td><input type=\"checkbox\" value='"+obj.id+"' /></td>";
						dataStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='todetail.do?id="+obj.id+"';\">"+obj.name+"</a></td>";
						dataStr+="<td>"+obj.owner+"</td>";
						dataStr+="<td>"+obj.startDate+"</td>";
						dataStr+="<td>"+obj.endDate+"</td>";
						dataStr+="</tr>";
					});
					$("#tBody").html(dataStr);
					//alert(data.activityList)
					$("#demo_pag1").bs_pagination({
						currentPage:pageNum,//当前页

						rowsPerPage:pageSize,//每页显示条数
						totalRows:data.allCount,//总条数
						totalPages: data.allPages,//总页数

						visiblePageLinks:5,//显示的翻页卡片数

						showGoToPage:true,//是否显示"跳转到第几页"
						showRowsPerPage:true,//是否显示"每页显示条数"
						showRowsInfo:true,//是否显示"记录的信息"

						//每次切换页号都会自动触发此函数，函数能够返回切换之后的页号和每页显示条数
						onChangePage: function(e,pageObj) {   // returns page_num and rows_per_page after a link has clicked
							selectActivities(pageObj.currentPage,pageObj.rowsPerPage);

						}
					});
				}
			});
		//});


	}
	function selectActivitiesByChaXun(){
		$("#queryActivityBtn").on("click",function () {
			selectActivities(1,2);
			});
	}
	function deleteActivityBtn() {
		$("#deleteActivityBtn").on("click",function () {
			var checked = $("#tBody input:checked");
			if(checked.size() ==0)
			{
				alert("至少选中一条记录!");
				return;
			}
			var checkStr="";
			$.each(checked,function (index,obj) {
				checkStr+="id="+$(obj).val()+"&";
			});
			checkStr = checkStr.substring(0,checkStr.length-1);
			$.ajax({
				url:"workbench/activity/deleteActivityBtn.do",
				type:"post",
				data:checkStr,
				success:function (data) {
					if(data.code == 1)
					{
						alert("删除成功！");
						selectActivities(1,10);
					}else {
						alert(data.success);
					}
				}
			});
		});
	}
	function exportActivityAllBtn() {
		$("#exportActivityAllBtn").on("click",function () {
			window.location.href="exportActivityAllBtn.do";
		});
		$("#exportActivityXzBtn").on("click",function () {
			var id = "";
			var checkedData = $("#tBody input:checked");
			if(checkedData.size() == 0)
			{
				alert("至少选中一条记录");
				return;
			}
			$.each(checkedData,function (index,obj) {
				id+="id="+$(obj).val()+"&";
			});
			id=id.substring(0,id.length-1);
			window.location.href="exportActivityXzBtn.do?id="+id;
		});

	}
	function importActivityListBtn() {
		$("#importActivityListBtn").on("click",function () {
			$("#importActivityModal").modal("show");
		});
		$("#importActivityBtn").on("click",function () {
			var fileVal = $("#activityFile").val();
			fileVal = fileVal.substring(fileVal.lastIndexOf("."));
			if(".xls" != fileVal)
			{
				alert("文件仅支持xls文件");
				return;
			}
			var fileSize = $("#activityFile")[0].files[0].size;
			if(fileSize> 1024*1024*5)
			{
				alert("上传仅支持5M一下的文件");
				return;
			}
			var file = $("#activityFile")[0].files[0];
			var formData = new FormData();
			formData.append("activityForm",file);
			$.ajax({
				url:"importActivityListBtn",
				data:formData,
				type:"post",
				contentType:false,
				processData:false,
				success:function (data) {
					if(data.code == 1)
						{
							alert("上传成功！");
							$("#importActivityModal").modal("hide");
							selectActivities(1,10);
						}else {
						alert(data.message);
					}
				}
			});

		});
	}


</script>
</head>
<body>

	<!-- 创建市场活动的模态窗口 -->
	<div class="modal fade" id="createActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form" id="activityForm">
					
						<div class="form-group">
							<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-marketActivityOwner">
									<c:forEach items="${userList}" var="u">
										<option value="${u.id}">${u.name}</option>
									</c:forEach>
								</select>
							</div>
                            <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-marketActivityName">
                            </div>
						</div>
						
						<div class="form-group">
							<label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control mydate" id="create-startDate" readonly="true">
							</div>
							<label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control mydate" id="create-endDate" readonly="true">
							</div>
						</div>
                        <div class="form-group">

                            <label for="create-cost" class="col-sm-2 control-label">成本<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-cost">
                            </div>
                        </div>
						<div class="form-group">
							<label for="create-description" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-description"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="saveCreateActivityBtn" type="button" class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改市场活动的模态窗口 -->
	<div class="modal fade" id="editActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
					    <input type="hidden" id="edit-id">
						<div class="form-group">
							<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-marketActivityOwner">
									<c:forEach items="${userList}" var="u">
										<option value="${u.id}">${u.name}</option>
									</c:forEach>
								</select>
							</div>
                            <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
                            </div>
						</div>

						<div class="form-group">
							<label for="edit-startDate" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control mydate" id="edit-startDate" value="2020-10-10">
							</div>
							<label for="edit-endDate" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control mydate" id="edit-endDate" value="2020-10-20">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-cost" value="5,000">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-description" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-description">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="saveEditActivityBtn" type="button" class="btn btn-primary">更新</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 导入市场活动的模态窗口 -->
    <div class="modal fade" id="importActivityModal" role="dialog">
        <div class="modal-dialog" role="document" style="width: 85%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
                </div>
                <div class="modal-body" style="height: 350px;">
                    <div style="position: relative;top: 20px; left: 50px;">
                        请选择要上传的文件：<small style="color: gray;">[仅支持.xls格式]</small>
                    </div>
                    <div style="position: relative;top: 40px; left: 50px;">
                        <input type="file" id="activityFile">
                    </div>
                    <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
                        <h3>重要提示</h3>
                        <ul>
                            <li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li>
                            <li>给定文件的第一行将视为字段名。</li>
                            <li>请确认您的文件大小不超过5MB。</li>
                            <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
                            <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
                            <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
                            <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
                </div>
            </div>
        </div>
    </div>
	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>市场活动列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="query-name">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="query-owner">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input class="form-control mydate" type="text" id="query-startDate" readonly/>
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input class="form-control mydate" type="text" id="query-endDate" readonly>
				    </div>
				  </div>
				  
				  <button id="queryActivityBtn" type="button" class="btn btn-default">查询</button>

				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button id="createActivityBtn" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button id="editActivityBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button id="deleteActivityBtn" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>
				<div class="btn-group" style="position: relative; top: 18%;">
                    <button id="importActivityListBtn" type="button" class="btn btn-default" ><span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）</button>
                    <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）</button>
                    <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）</button>
                </div>
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="chkedAll"/></td>
							<td>名称</td>
                            <td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody id="tBody">

					</tbody>
				</table>
                <!--创建容器-->
                <div id="demo_pag1"></div>
			</div>
			
		</div>
		
	</div>
</body>
</html>